<template>
	<view class="home">
		<view id="carousel">
			<swiper class="swiper" :autoplay="autoplay" :interval="interval" :duration="duration">
				<block v-for="(item,index) in img" :key="index">
					<swiper-item>
						<image :src="item" class="swiperImg"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="homewarpper">
			<view id="container">
				<view id="card1" class="containercard" @click="gotoorder">
					<uni-card mode="style" :is-shadow="true">
						<image class="containerimage" src="../../static/img/home/home_icon/tangshi.png"></image>
						<view class="containertitle">
							<text>点餐</text>
						</view>
						<view style="margin: 1vh 0;">
							<text>在线点单</text>
						</view>
					</uni-card>
				</view>
				<view id="card2" class="containercard" @click="gotPaidui">
					<uni-card mode="style" :is-shadow="true">
						<image class="containerimage" src="../../static/img/home/home_icon/waimai.png"></image>
						<view class="containertitle">
							<text>预约叫号</text>
						</view>
						<view style="margin: 1vh 0;">
							<text>排队预约叫号</text>
						</view>
					</uni-card>
				</view>
			</view>
			<view id="footer">
				<view id="card3" class="footercard">
					<uni-card mode="style" :is-shadow="true">
						<view class="footerwarpper">
							<view>
								<image class="footerimage" src="../../static/img/home/home_icon/huiyuan.png"></image>
							</view>
							<view class="footertitle">
								<text>会员福利</text>
							</view>
						</view>
					</uni-card>
				</view>
				<view id="card4" class="footercard">
					<uni-card mode="style" :is-shadow="true">
						<view class="footerwarpper">
							<view class="img">
								<image class="footerimage" src="../../static/img/home/home_icon/jiaruwomen.png"></image>
							</view>
							<view class="footertitle">
								<text>加入我们</text>
							</view>
						</view>
					</uni-card>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'Index',
		components: {

		},
		data() {
			return {
				img: [
					
					"http://47.106.199.123:8080/pictures//static/home/food1.png",
					"http://47.106.199.123:8080/pictures//static/home/food2.png",
					"http://47.106.199.123:8080/pictures//static/home/food3.png",
					"http://47.106.199.123:8080/pictures//static/home/food4.png",
					"http://47.106.199.123:8080/pictures//static/home/f4.png" ,
				
				],
				autoplay: true,
				interval: 5000,
				duration: 500
			}
		},
		methods: {
			gotoorder() {
				uni.switchTab({
					url: "../list/list"
				})
			},
			gotPaidui(){
				uni.navigateTo({
					url: "../lineup/lineup"
				})

			}
		}

	}
</script>

<style>
	.home {
		background-color: #f0f0f0;
		min-height: 100vh;
		/* padding-bottom: 2vh; */
		position: relative;
	}

	.swiper {
		height: 70vh;
		width: 100%;
		overflow: hidden;
	}

	.swiperImg {
		width: 100vw;
		height: 100vh;
	}
	.homewarpper{
		position: absolute;
		bottom: 2vh;
		left: 0;
		right: 0;
		top: auto;
	}
	#container {
		width: 84vw;
		/* height: 84vw; */
		margin: -6vh 8vw 0 8vw;
		border-radius: 2rpx;
		background-color: #ffffff;
		display: flex;
		position: relative;
		z-index: 1;
	}

	.containercard {
		width: 42vw;
		/* height: 21vh; */
		text-align: center;
		padding-bottom: 1vh;
		flex: 1;
		background-color: #ffffff;
		border: 2rpx #eeeeee solid;
		border-radius: 5rpx;
	}

	.containerimage {
		margin-top: 2vh;
		width: 100rpx;
		height: 100rpx;
	}

	.containertitle {
		white-space:nowrap;
		margin-top: 1vh;
		font-size: 48rpx;
		font-weight: bold;
	}

	#footer {
		width: 84vw;
		margin: 1vh 8vw 0 8vw;
		/* height: 14vh; */
		display: flex;
		justify-content: space-between;
	}

	.footerwarpper {
		margin-top: -10rpx;
		margin-left: -20rpx;
		display: flex;
		padding: 1vh;
	}

	.footercard {
		width: 38vw;
		height: 20vh;
		background-color: #ffffff;
		border: 4rpx #eeeeee solid;
		border-radius: 10rpx;
		font-size: 22rpx;
		font-weight: bold;
	}

	.footerimage {
		width: 6vh;
		height: 6vh;
	}

	.footertitle {
		white-space:nowrap;
		font-size: 2rpx;
		padding: 3vh 0 3vh 0;
	}
</style>
